<template>
  <div class="employee-contaioner">
    =={{ dialogVisible }}
    <!-- <el-card class="first-card" /> -->

    <page-tool>
      <el-button
        slot="left"
        size="small"
        type="primary"
        icon="el-icon-info"
      >共有{{ total }}条记录</el-button>

      <div slot="right">
        <el-button
          size="mini"
          type="warning"
          @click="$router.push('/import')"
        >Excel导入</el-button>

        <el-button
          size="mini"
          type="danger"
          @click="handleDownload"
        >excel导出</el-button>

        <el-button
          size="mini"
          type="primary"
          :disabled="!isCheck('aa')"
        >新增员工</el-button>
      </div>
    </page-tool>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="username" label="姓名" width="80" />
      <el-table-column label="图像" width="120">
        <template slot-scope="{ row }">
          <el-avatar :size="60" :src="row.staffPhoto" @error="errorHandler">
            <img
              src="https://z3.ax1x.com/2021/06/15/2bactg.png"
              @click="showQrcode('https://z3.ax1x.com/2021/06/15/2bactg.png')"
            >
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机" width="120" />
      <el-table-column prop="workNumber" label="工号" width="120" />
      <el-table-column label="聘用形式" width="100">
        <template slot-scope="{ row }">
          {{ row.inServiceStatus == 1 ? '正式' : '实习' }}
        </template>
      </el-table-column>
      <el-table-column prop="departmentName" label="部门" width="120" />
      <el-table-column prop="timeOfEntry" label="入职时间" width="120">
        <template slot-scope="{ row }">
          {{ row.timeOfEntry | formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="账户状态" width="120">
        <template slot-scope="{ row }">
          {{ row.enableState == 1 ? '可用' : '不可用' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >查看</el-button>
          <el-button type="text" size="small">转正</el-button>
          <el-button type="text" size="small">调岗</el-button>
          <el-button type="text" size="small">离职</el-button>
          <el-button
            type="text"
            size="small"
            @click="setRoles(scope.row.id)"
          >角色</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display:flex;justify-content:flex-end;align-items:center">
      共{{ total }}条
      <el-pagination
        :total="total"
        :page-size="page.size"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 角色 -->
    <assign-role :id="id" :dialog-visible.sync="dialogVisible" />

    <!-- 二维码 -->
    <el-dialog title="提示" :visible.sync="dialogVisibleQrcode" width="30%">
      <canvas id="canvas" ref="canvas" />
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import { getEmployeeList } from '@/api/employees'

// import { parseTime } from '@/utils'

import assignRole from './components/assign-role.vue'

import { parseTime, formatTime2 } from '@/utils'
export default {
  components: {
    assignRole
  },
  data() {
    return {
      tableData: [],
      page: {
        page: 1,
        size: 5
      },
      total: 0,
      id: null,
      dialogVisible: false,
      dialogVisibleQrcode: false
    }
  },
  created() {
    this.getEmploy()
    console.log(this, 77777)
  },
  methods: {
    handleClick(row) {
      console.log(row)
      // this.$router.push('/employees/detail/' + row.id)
      this.$router.push({
        name: 'employees/detail',
        params: {
          id: row.id,
          row
        }
      })
    },

    errorHandler() {
      return true
    },

    /* 分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
      this.getEmploy()
    },

    async getEmploy() {
      const { rows, total } = await getEmployeeList(this.page)
      this.tableData = rows
      this.total = total
    },

    /* 角色 */
    setRoles(id) {
      this.id = id
      this.dialogVisible = true
    },

    /* 点击图片显示二维码 */
    showQrcode(url) {
      this.dialogVisibleQrcode = true
      this.$nextTick(() => {
        console.log(this.$refs.canvas, url, 888999)
        QRCode.toCanvas(this.$refs.canvas, url, function(error) {
          if (error) console.error(error)
          console.log('success!')
        })
      })
    },

    /* 文件导出 */
    handleDownload() {
      // this.downloadLoading = true
      import('@/vendor/Export2Excel').then(async excel => {
        /* 定义表头 */
        // 表头对应关系
        const headers = {
          /* 属性名：在表格中对应的是表头   属性值：在表格中对应的是 每一行的内容 */
          姓名: 'username',
          手机号: 'mobile',
          聘用形式: 'formOfEmployment',
          入职日期: 'timeOfEntry',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          部门: 'departmentName'
        }
        //  获取动态表头

        /* 显示excel的标题  表头 */
        // const tHeader = ['Id', '用户名', '手机号', '工号', '部门', 'hobby']
        // /* 根据数组中的每一项的属性  来显示到对应的表格中 */
        /*  Object.values(headers) */
        // const filterVal = [
        //   'id',
        //   'username',
        //   'mobile',
        //   'workNumber',
        //   'departmentName',
        //   'timeOfEntry'
        // ]
        /* 表格中需要显示的数据  是一个数组 */
        // const list = this.tableData
        const { rows: list } = await getEmployeeList({
          page: 1,
          size: this.total
        })
        const data = this.formatJson(headers, list)
        console.log(data, 55555)
        excel.export_json_to_excel({
          multiHeader: [['姓名', '主要信息', '', '', '', '', '部门']],
          merges: ['A1:A2', 'B1:F1', 'G1:G2'],
          header: Object.keys(headers),
          data,
          filename: '员工花名册',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(headers, list) {
      //  jsonData====list   //  list.map
      return list.map(v => {
        return Object.values(headers).map(j => {
          //  判断的目的是对数据处理
          // j 获取的是 需要在表格中展示的每一项的属性名
          // if (j === 'timeOfEntry') {
          //   return parseTime(v[j])
          // } else if(j==='formOfEmployment') {
          //   return v[j]
          // }else {
          //   return v[j]
          // }
          if (j === 'timeOfEntry' || j === 'correctionTime') {
            return formatTime2(v[j])
          }
          if (j === 'formOfEmployment') {
            return v[j] === '1' ? '正式' : '非正式'
          }
          return v[j]
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.employee-contaioner {
  background-color: #fff;
  .first-card {
    margin-bottom: 30px;
    ::v-deep .el-card__body {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
